<template>
    <div class="layout">
        <div class="top">
            <div class="title">详细数据</div>
            <el-button v-auth="'MOMENT_TREND_EXPORT'" class="btn" @click="exportData">导出</el-button>
        </div>
        <div class="table_box">
            <el-table
                v-if="weChart == 1 && infoData.length > 0"
                :data="infoData"
                stripe
                style="width: 100%"
                @sort-change="sortChange">
                <el-table-column prop="media_content_title" label="内容名称" />
                <el-table-column prop="view_people" sortable label="浏览人数" width="200" />
                <el-table-column prop="view_num" sortable="custom" label="浏览次数" width="200" />
                <el-table-column prop="view_length" sortable="custom" label="浏览时长" width="200" />
                <el-table-column prop="cust_share_num" sortable="cust_share_num" label="客户分享人数" width="200" />
                <el-table-column prop="staff_share_num" sortable="staff_share_num" label="员工分享人数" width="200" />
                <el-table-column label="操作" class="detail" width="140">
                    <template #default="scope">
                        <el-button size="small" @click="clickDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div v-if="weChart == 1 && infoData.length == 0" class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="no_title">暂无数据</div>
            </div>
            <el-table
                v-if="weChart != 1 && dataInfos.length > 0"
                :data="dataInfos"
                stripe
                style="width: 100%"
                @sort-change="sortChange">
                <el-table-column prop="media_moment_title" label="朋友圈素材名称" width="180" />
                <el-table-column prop="like_num" sortable label="点赞数" width="180" />
                <el-table-column prop="comment_per_num" sortable label="评论次数" />
                <el-table-column prop="comment_user_num" sortable label="评论人数" />
            </el-table>
            <div v-if="weChart != 1 && dataInfos.length == 0" class="no_data">
                <img class="no_img" src="@/assets/noData.png" alt="" />
                <div class="no_title">暂无数据</div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
defineProps(['infoData', 'dataInfos', 'weChart']);
const router = useRouter();
const emit = defineEmits({
    exportData: null,
    SortData: null
});
const exportData = () => {
    emit('exportData');
};
const clickDetail = (row: any) => {
    router.push(`/content/basematerial/statement?id=${row.media_content_id}&title=${row.media_content_title}`);
};
//升降序排列
const sortChange = (obj: any) => {
    const params = {
        prop: obj.prop,
        sort: 'ASC'
    };
    if (obj.order === 'ascending') {
        params.sort = 'ASC';
    }
    if (obj.order === 'descending') {
        params.sort = 'DESC';
    }
    if (obj.prop === null && obj.order === null) {
        params.prop = 'view_people';
        params.sort = 'DESC';
    }
    emit('SortData', params);
};
</script>
<style lang="scss" scoped>
.layout {
    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 24px;
        border-bottom: 1px solid #eaeaea;
        margin-bottom: 20px;

        .title {
            font-size: 16px;
        }

        .btn {
            line-height: 36px;
            padding: 0 18px;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
        }
    }

    .table_box {
        padding: 0 24px;
    }

    .detail {
        &_btn {
            display: inline-block;
            padding: 5px 16px;
            border: 1px solid #eaeaea;
        }
    }

    .no_data {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .no_img {
            margin-left: 24px;
        }

        .no_title {
            color: #909399;
            font-size: 14px;
        }
    }
}
</style>
<style lang="scss">
.el-table {
    .el-table__header-wrapper,
    .el-table__fixed,
    .el-table__fixed-right {
        .el-table__header {
            thead {
                tr {
                    th {
                        background-color: #f9f9f9;
                    }
                }
            }
        }
    }
}
</style>
